<template>
    <div :class="{'pagination-vertical' : mode ==='vertical',[prefixCls+'-pagination-size-small']:size==='small',[prefixCls+'pagination-simple']:simple,[prefixCls+'-pagination']:true}">
    	<span class="total" v-if="showTotal">共 {{total}} 条</span>
        <button type="button" :disabled="current === 1" class="btn-prev" @click="prevPage">
            <i class="icon icon-arrow-left"></i>
        </button>
        <ul class="pager">
            <li v-for="(page) in pageList" :key="page" :class="{
                    active: page === current && typeof page !== 'string', 
                    'more btn-quickprev': page === 'prev',
                    'more btn-quicknext': page === 'next'
                    }" @click="pagerClick(page)">{{typeof page === 'number' ? page + suffix : '•••'}}</li>
        </ul>
        <button type="button" :disabled="current === pageTotal" class="btn-next" @click="nextPage">
            <i class="icon icon-arrow-right"></i>
        </button>
        <select v-model="pageSizeVal" @change="pageSizeChange($event.target.value)" v-if="showElevator">
        	<option v-for="n in pageSizeOpts" :value="n" :key="n">{{n}}条/页</option>
        </select>
        <span class="go-page" v-if="showJumper && mode ==='horizontal'">
            前往&thinsp;
            <input ref="goPageInput" 
            type="text" 
            @blur="goPage($refs.goPageInput.value*1)" 
            @keydown.enter="goPage($refs.goPageInput.value*1)" />&thinsp;页
        </span>
    </div>
</template>
<script>
import { prefixCls } from '../prefix'
import './pagination.css'

export default {
    name: `${prefixCls}Page`,
    props: {
        //数据总数
        total: {
            type: Number,
            default: 0
        },
        //当前页
        currentPage: {
            type: Number,
            default: 1
        },
        //页码显示数量
        pagerCount: {
            type: Number,
            default: 10
        },
        //展示模式横向或竖向
        mode: {
            type: String,
            default: 'horizontal'
        },
        //分页跳转
        showJumper: {
            type: Boolean,
            default: false
        },
        //分页码后缀
        suffix: {
            type: String,
            default: ''
        },
        // 每页条数
        pageSize: {
        	type: [Number,String],
        	default: 10
        },
        //每页条数切换的配置
        pageSizeOpts: {
        	type: Array,
            default() {
                return [10,20,50,100]
            }
        },
        // 显示总数
        showTotal: {
        	type:Boolean,
        	default: false
        },
        // 显示电梯，可以快速切换到某一页
        showElevator: {
        	type:Boolean,
        	default: false
        },
        // 分页尺寸
        size: {
        	type:String,
        	default:''
        },
        // 简单模式
        simple: {
        	type:Boolean,
            default() {
                return false
            }
        },
    },
    data() {
        return {
            prefixCls: prefixCls,
            current: 1,
            pageTotal: Math.ceil(this.total / this.pageSize), //总页数
            pageList: [], //分页列表
            pageSizeVal:this.pageSize
        };
    },
    watch: {
        total() {
            this.pageTotal = Math.ceil(this.total / this.pageSize), //总页数
            this.getPageList(this.current);
        },
        currentPage(val) {
            this.current = val;
        },
        pagerCount() {
            this.getPageList(this.current);
        },
        current(val, old) {
            this.pageList = this.getPageList(val);
            this.$emit('current-change', val, old);
        },
        pageTotal() {
        	this.pageList = this.getPageList(this.current);
        },
        pageSize(val) {
            this.pageSizeVal = val
        }
    },
    mounted() {
        this.current = this.currentPage;
        this.pageList = this.getPageList(this.current);
    },
    methods: {
        getPageList(current) {
            let { pageTotal, pagerCount } = this;
            let pageList = [];
            //如果总页数在可显示页码数量以内，全部显示
            if (pagerCount > pageTotal - 1) {
                for (let i = 1; i <= pageTotal; i++) {
                    pageList.push(i);
                }
            } else {
                //如果总页数超过可显示页码数量，根据不同情况显示

                //当前页能连到开始
                if (current < pagerCount - 1) {
                    for (let i = 1; i < pagerCount; i++) {
                        pageList.push(i);
                    }
                    pageList.push('next');
                    pageList.push(pageTotal);
                } else {
                    //当前页能连到结束
                    if (current >= pageTotal - 1 - Math.floor(pagerCount / 2)) {
                        pageList.push(1);
                        pageList.push('prev');
                        for (
                            let i = pageTotal - (pagerCount - 2); i <= pageTotal; i++
                        ) {
                            pageList.push(i);
                        }
                    } else {
                        //当前页不能连到结束
                        pageList.push(1);
                        pageList.push('prev');

                        for (
                            let i = current - Math.floor((pagerCount - 2) / 2); i <=
                            current + (Math.ceil((pagerCount - 2) / 2) - 1); i++
                        ) {
                            pageList.push(i);
                        }

                        pageList.push('next');
                        pageList.push(pageTotal);
                    }
                }
            }

            return pageList;
        },
        /**
         * 上一页
         */
        prevPage() {
            if (this.current > 1) {
                this.current--;

                this.$emit('prev-click', this.current);
            }
        },
        /**
         * 下一页
         */
        nextPage() {
            if (this.current < this.pageTotal) {
                this.current++;
                this.$emit('next-click', this.current);
            }
        },
        /**
         * 分页点击
         * @param {Number} page 目标页面
         */
        pagerClick(page) {
            if (typeof page === 'number') {
                this.current = page;
                this.$emit('page-click', page);
            } else {
                let quickPage = 1;
                if (page === 'prev') {
                    quickPage = this.current - (this.pagerCount - 2);
                    quickPage < 1 && (quickPage = 1);
                }

                if (page === 'next') {
                    quickPage = this.current + (this.pagerCount - 2);
                    quickPage > this.pageTotal && (quickPage = this.pageTotal);
                }
                this.current = quickPage;

                this.$emit(`${page}-quick-click`, this.current);
            }
        },
        /**
         * 跳转页
         * @param {Number} page 目标页面
         */
        goPage(page) {
            this.current = page < 1 ? 1 : page > this.pageTotal ? this.pageTotal : page;
            this.$refs.goPageInput.value = this.current;

            this.$emit('jumpe', page);
        },
        /**
         * 每页显示条数切换
         */
        pageSizeChange(page) {
        	this.pageTotal = Math.ceil(this.total / page), //总页数改变
        	this.$emit('page-size-change', Number(page));
        }
    }
};
</script>